<template>
  <div>
    <!--新报警信息主题信息-->
    <div class="modal_body">
      <div id="button-group">
        <el-button-group>
          <el-button
            type="info"
            icon="el-icon-tickets"
            size="mini"
            @click="openalarmlog"
            >{{ $t("menu.alarmlog") }}</el-button
          >
          <el-button
            type="info"
            icon="el-icon-thumb"
            size="mini"
            @click="confirmalarm"
            >{{ $t("button.allconfirm") }}</el-button
          >
        </el-button-group>
      </div>

      <div class="rtu">
        <!--操作日志条件过滤-->
        <!--操作日志列表-->
        <div class="rtutable">
          <el-table
            ref="multipleTable"
            height="410px"
            size="mini"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            :header-cell-style="tableHeaderStyle"
            @row-dblclick="maplocation"
            highlight-current-row
            @row-click="handleCheckRow"
            class="subtable"
          >
            <el-table-column
              prop="deviceName"
              :label="
                $t(
                  'title.tunnellightingsystem_systemmanagement_title_devicename'
                )
              "
              width="110"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              prop="alertLevel"
              :label="$t('title.tunnellightingsystem_systemmanagement_title_alarmlevel')"
              width="90"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <dict-tag :options="options" :value="scope.row.alertLevel" />
              </template>
            </el-table-column>
            <el-table-column
              prop="alertName"
              width="100"
              :label="$t('title.tunnellightingsystem_systemmanagement_title_alarmname')"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              prop="createTime"
              :label="$t('title.tunnellightingsystem_systemmanagement_title_alarmtime')"
              width="100"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              :label="
                $t('title.tunnellightingsystem_systemmanagement_title_operate')
              "
            >
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleConfirm(scope.$index, scope.row)"
                  >{{$t("button.confirm")}}</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <!--分页功能-->
    <div class="modal_bottom">
      <el-pagination
        :small="true"
        :background="true"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="perpage"
        layout="total,pager, prev, next"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import {
  listAlertLog,
  getDicts,
  updateAlertLog,
  confirmAll,
} from "@/api/iot/alertLog";
import { Event } from "@/main.js";
import { getDeviceAlarmDetail } from '@/api/iot/device';
export default {
  name: "newalarm",
  data() {
    return {
      msg: "newalarmclose",
      currentPage: 1,
      perpage: 20,
      total: 0,
      tableData: [],
      options: [],
    };
  },
  beforeDestroy() {
    Event.$off("alarm");
  },
  mounted() {
    if(localStorage.getItem('querymode') && localStorage.getItem('querymode') ==='single') {
      Event.$on('alarm',msg => {
        var page = {};
        page.pageSize = this.perpage;
        page.pageNum = this.currentPage;
        page.serialNumber = msg.serialNumber;
        getDeviceAlarmDetail(page).then((res)=>{
          this.tableData = res.rows;
          this.total = res.total;
        })
      })
    }else{
      //在模板编译完成后执行
       this.getLarmList();
    }
    getDicts("iot_alert_level").then((res) => {
      let list = [];
      res.data.forEach((element) => {
        list.push({
          label: element.dictLabel,
          raw: element,
          value: element.dictValue,
        });
      });
      this.options = list;
    });
  },
  methods: {
    openalarmlog() {
      this.msg = "openalarmlog";
      this.$emit("openalarmlog", this.msg);
    },
    getLarmList() {
      var page = {};
      page.pageSize = this.perpage;
      page.pageNum = this.currentPage;
      page.status = 2;
      listAlertLog(page).then((response) => {
        this.tableData = response.rows;
        this.$emit("getEventCount",response.total);
        this.total = response.total;
      });
    },
    confirmalarm() {
      var that = this;
      this.$refs.multipleTable.data;
      if (this.$refs.multipleTable.data.length > 0) {
        this.lampeventid = "";
        for (var i = 0; i < this.$refs.multipleTable.data.length; i++) {
          if (i == this.$refs.multipleTable.data.length - 1) {
            this.lampeventid =
              this.lampeventid + this.$refs.multipleTable.data[i].eventid;
          } else
            this.lampeventid =
              this.lampeventid + this.$refs.multipleTable.data[i].eventid + ",";
        }
        if (sessionStorage.lang == "zh-cn") {
          this.$confirm("故障确认后，不会继续提示, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              that.doConfirmEvent();
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消确认",
              });
            });
        } else {
          this.$confirm(
            "After the fault is confirmed, the prompt will not continue. Do you want to continue?",
            "Tips",
            {
              confirmButtonText: "OK",
              cancelButtonText: "Cancel",
              type: "warning",
            }
          )
            .then(() => {
              that.doConfirmEvent();
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "Confirmation cancelled",
              });
            });
        }
      }
    },
    //设置表头行的样式
    tableHeaderStyle({ row, column, rowIndex, columnIndex }) {
      return "background-color: #ffffff;color: #000000;font-size:14px";
    },
    handleConfirm(index, row) {
      row.remark = "1";
      let text = "";
      let sumsg = "";
      let errmsg="";
      if (sessionStorage.lang == "zh-cn") {
        text = "故障确认后，不会继续提示, 是否继续?";
        sumsg="已确认";
        errmsg = "已取消确认";
      } else {
        text = "After the fault is confirmed, the prompt will not continue. Do you want to continue?";
        sumsg="Confirmed";
        errmsg = "Confirmation cancelled";
      }
      this.$confirm(text, this.$t('tips.tunnellightingsystem_frontpage_tips_prompt'), {
        confirmButtonText: this.$t("button.tunnellightingsystem_frontpage_button_confirm"),
        cancelButtonText: this.$t("button.tunnellightingsystem_frontpage_button_cancel"),
        type: "warning",
      })
        .then(() => {
          updateAlertLog(row).then(() => {
            this.getLarmList();
            this.maplocation();
            this.$message({
              type: "success",
              message: sumsg,
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: errmsg,
          });
        });
    },
    maplocation() {
      this.$emit("getEventCount");
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getLarmList();
    },
    handleCheckRow(row){
      let obj = {
        longitude: row.longitude,
        latitude: row.latitude,
      }
      this.$emit('alarmmsg', obj)
    },
    doConfirmEvent(eventid) {
      let text = "";
      if(sessionStorage.lang == "zh-cn"){
        text = "已确认全部告警";
      }else{
        text = "Confirmed all alarms";
      }
      confirmAll().then((res) => {
        if (res.code == 200) {
          this.getLarmList();
          this.$message({
            type: "success",
            message: text,
          });
        }
      });
    },
  },
};
</script>

<style scoped>
.el-button-amplify {
  height: 28px;
  float: left;
  margin-left: 10px;
}
.export {
  float: right;
  margin-right: -350px;
}
.rtutable {
  border-radius: 5px;
}
.search {
  position: relative;
  float: left;
  margin-left: -200px;
}
.syslogbar {
  float: left;
  width: 300px;
  margin: auto 0px;
}
.modal_bottom {
  text-align: center;
  margin-top: 4px;
}
.rtutable >>> .el-table {
  background-color: #edeef0;
}
.subtable >>> .el-table__body-wrapper {
  background-color: #edeef0;
}
.subtable >>> .el-table__row {
  background-color: white;
  color: #000000;
}
.rtutable >>> .el-table tbody tr:hover > td {
  background-color: #edeef0 !important;
}
.rtutable >>> .el-table td {
  padding: 4px 0;
  font-size: 12px;
  border-bottom: 0.2px solid #dddddd;
}
.rtutable >>> .el-table::before {
}
.rtutable >>> .el-table th.is-leaf {
  border-bottom: 0.1px solid #dddddd;
}
.subtable >>> .el-checkbox__inner {
}
.subtable >>> .el-checkbox__inner::after {
  border: 2px solid #ffffff;
  border-left: 0px;
  border-top: 0px;
}
.modal_bottom >>> .el-input__inner {
  height: 22px;
  background-color: #edeef0;
  color: #636363;
}
.modal_bottom >>> .el-pagination__total {
  color: #ffffff;
}
.modal_bottom >>> .el-pagination__jump {
  color: #ffffff;
}
.modal_bottom >>> .el-pagination.is-background .el-pager li {
  color: #636363;
  background-color: #fff;
}
.modal_bottom >>> .btn-prev {
  color: #636363;
  background-color: #fff;
}
.modal_bottom >>> .btn-next {
  color: #636363;
  background-color: #fff;
}
.modal_bottom >>> .el-popper {
  background-color: #18ab8f !important;
}

.modal_bottom
  >>> .el-pagination.is-background
  .el-pager
  li:not(.disabled).active {
  background-color: #edeef0 !important;
}
#button-group {
  float: right;
  margin-bottom: 5px;
}
.modal_head {
  height: 30px;
  background: #3586ff;
  border-radius: 7px 7px 0 0;
  color: #ffffff;
  line-height: 30px;
  font-size: 14px;
}
.rtutable >>> .el-table th.gutter {
  display: table-cell !important;
}
</style>
